<template>
  <div class="records-container">
    <div class="records-wrapper">
      <div class="page-header">
        <!-- 返回按钮 -->
        <h1 class="page-title">高分榜</h1>
        <div class="back-button" @click="goBack">
          <el-icon><ArrowLeft /></el-icon>
          <span>返回</span>
        </div>
      </div>

      <!-- 标题 -->

      <!-- 记录列表 -->
      <div class="record-list">
        <LoadingNodata :loading="loading" :data="recordList">
          <div class="record-item" @click="goDetail(item.id)" v-for="(item, index) in recordList" :key="index">
            <div class="record-content">
              <div class="record-title">{{ item.title }}</div>
              <div class="record-time">{{ formatDate(item.update_time) }}</div>
            </div>
            <div class="record-score">{{ item.description }}</div>
          </div>
        </LoadingNodata>
      </div>

      <!-- 分页组件 -->
      <div class="pagination-container">
        <Pagination
          :current-page="currentPage"
          :total="totalRecords"
          :page-size="pageSize"
          @update:current-page="handlePageChange"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { ArrowLeft } from "@element-plus/icons-vue";
import { useRouter, useRoute } from "vue-router";
import { formatDate } from "@/utils/index.js";
import { getArticleList } from "@/service/article";
import LoadingNodata from "@/components/LoadingNodata";

const router = useRouter();
const route = useRoute();

// 分页数据
const currentPage = ref(1);
const pageSize = ref(10);
const totalRecords = ref(988);

// 记录列表数据
const recordList = ref([]);
const typeId = ref(route.query.typeid || 1);

// 返回上一页
const goBack = () => {
  router.back();
};

// 跳转详情页
const goDetail = (id) => {
  router.push(`/consultDetail/${id}`);
};

// 格式化时间
const formatTime = (timestamp) => {
  return formatTimestamp(timestamp, "YYYY-MM-DD HH:mm");
};

// 页码变化处理
const handlePageChange = (page) => {
  currentPage.value = page;
  fetchRecords();
};

// 获取记录数据
const fetchRecords = () => {
  // 模拟数据，实际项目中应该调用API
  getArticleList({
    page: currentPage.value,
    rows: pageSize.value,
    typeid: typeId.value
  }).then((res) => {
    console.log(res);
    recordList.value = res.data.result;
    totalRecords.value = res.data.totalCount;
  });
};

onMounted(() => {
  fetchRecords();
});
</script>

<style scoped lang="scss">
.records-container {
  display: flex;
  justify-content: center;
  padding: 20px;
  background-color: #ecf4f2;
  min-height: 100vh;
}

.records-wrapper {
  width: 1000px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 20px;
}
.page-header {
  position: relative;
}

.back-button {
  display: flex;
  align-items: center;
  cursor: pointer;
  margin-bottom: 20px;
  color: #333;

  span {
    margin-left: 5px;
  }

  &:hover {
    color: #126983;
  }
}

.page-title {
  font-size: 20px;
  margin-bottom: 20px;
  font-weight: 500;
  text-align: center;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
}

.record-list {
  margin-bottom: 20px;
}

.record-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
  gap: 10px;
  border-bottom: 1px solid #eee;
  cursor: pointer;

  &:last-child {
    border-bottom: none;
  }
}

.record-content {
  flex: 1;
}

.record-title {
  font-family: PingFang SC;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0%;
  color: #333;
  margin-bottom: 10px;
}

.record-time {
  font-size: 14px;
  color: #999;
}

.record-score {
  font-size: 24px;
  font-weight: 500;
  width: 100px;
  height: 74px;
  color: #fff;
  background-color: #269480;
  // padding: 10px 20px;
  text-align: center;
  line-height: 74px;
  border-radius: 4px;
}

.pagination-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}

.total-records {
  font-size: 14px;
  color: #666;
}
</style>
